<template>
    <div class="project_doctor">
        <div class="search">
            <div class="left">
                <!-- 项目名称 -->
                <div class="search_list">
                    <span class="search_text">项目名称：</span>
                    <el-select 
                        v-model="project_name" 
                        clearable 
                        placeholder="请选择"
                        @change="get_rept_list">
                        <el-option
                            v-for="item in project_list"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="center">
                <!-- 代表 -->
                <div class="search_list">
                    <span class="search_text">代表：</span>
                    <el-select v-model="rep_name" clearable placeholder="请选择">
                        <el-option
                            v-for="item in rep_list"
                            :key="item.repId"
                            :label="item.name"
                            :value="item.repId">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="right">
                <!-- 项目状态 -->
                <div class="search_list">
                    <span class="search_text">项目状态：</span>
                    <el-select v-model="project_status" clearable placeholder="请选择">
                        <el-option
                            v-for="item in project_status_list"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </div>
            </div>
        </div>
        <!--列表-->
        <div class="list blockMould project_doctor_list">
            <div class="list_head_button">
                <div class="search_button">
                    <el-tooltip popper-class="export_button_promit" effect="dark" content="每次导出数据不能超过1万条记录" placement="top">
                        <el-button size="mini" type="warning" plain @click="exportProjectDoctor">导出医生</el-button>
                    </el-tooltip>
                </div>
                <div class="search_name">
                    <el-button size="mini" type="primary" @click="search_list">查询</el-button>
                    <el-button size="mini" @click="reset_list">重置</el-button>
                </div>
            </div>
            <el-table
                :header-cell-style="{background:'#F6F7FB',color:'#666666',height: '50px'}"
                :row-class-name="tableRowClassName"
                :data="projectDoctorList">
                <el-table-column
                    prop="productName"
                    label="项目"
                    min-width="100">
                </el-table-column>
                <el-table-column
                    prop="repName"
                    label="代表"
                    min-width="80">
                </el-table-column>
                <el-table-column
                    label="医生"
                    min-width="80">
                    <template slot-scope="scope">
                        <span @click="getDoctorInfo(scope.row)">{{scope.row.doctorName}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="doctorHospital"
                    label="医院"
                    min-width="175"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="doctorDept"
                    label="科室"
                    min-width="100">
                </el-table-column>
                <el-table-column
                    prop="province"
                    label="省份"
                    min-width="90">
                </el-table-column>
                <el-table-column
                    prop="city"
                    label="城市"
                    min-width="80">
                </el-table-column>
                <el-table-column
                    label="项目状态"
                    min-width="80">
                    <template slot-scope="scope">
                        <span :style="{background:scope.row.bgcolor,color:scope.row.color}">{{scope.row.isRecruit}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <pagination :page="page" @changeCurrentPage="handleCurrentChange" @changePageSize="handlePageSize"/>
        </div>
        <!-- 侧边弹框 -->
        <drawer/>
        <!-- 拜访登记 -->
        <phone/>
    </div>
</template>

<script>
    import pagination from '../public/pagination';
    import drawer from '../../element/drawer';
    import bus from '../../assets/js/eventBus';
    import {api, baseAjax} from '../../api/api';
    import {statusCode} from '../../utils/index';
    import Cookies from 'js-cookie';
    import {url, httpExcel} from '../../api/http';
    import phone from '../../element/phone';
    export default {
        name: "projectDoctorManagement",
        components:{
            pagination,
            drawer,
            phone
        },
        data() {
            return {
                //分页
                page: {
                    currentPage: 1,    //当前页
                    pageSize: 10,    //每页显示条数
                    totalPage: 0,   //总页数
                    total:null     //总条数
                },
                project_name:'',   //项目名称筛选
                project_list:[],   //项目下拉框值
                rep_name:'',   //代表筛选
                rep_list:[],   //代表下拉框值
                project_status:'',   //项目状态筛选
                project_status_list:[
                    {
                        id:0,
                        name:'未招募'
                    },
                    {
                        id:1,
                        name:'成功招募'
                    },
                    {
                        id:2,
                        name:'退出项目'
                    }
                ],   //项目状态下拉框值
                projectDoctorList:[],   //列表数据
                user_info:{}
            }
        },
        mounted(){
            this.get_project_list();//列表数据
            this.get_all_product();//获取所有产品
        },
        methods: {
            //修改列表tr颜色
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 1) {
                return 'success_row';
                }
                return '';
            },
            //改变当前页码
            handleCurrentChange(currentPage) {
                this.page.currentPage = currentPage;
                this.get_project_list();
            },
            //改变每页条数
            handlePageSize(pageSize){
                this.page.pageSize = pageSize;
                this.get_project_list();
            },
            //获取医生信息
            getDoctorInfo(info){
                let doctor_info = this.dealDoctorInfo(info);
                Cookies.set('doctor_info', this.EncryUtil.encryptByAES(JSON.stringify(doctor_info)), {expires: 24 * 60 * 60 * 1000});
                let data = {
                    is_drawer:true,   //是否显示侧边弹框 true-显示 false-隐藏
                    is_supplement:true   //是否显示补填信息按钮  true-显示  false-隐藏
                };
                bus.$emit('get_doctor_info',data);
            },
            dealDoctorInfo(info){
                let gender = '';
                if(info.doctorGender == 1){
                    gender = '男';
                }else if(info.doctorGender == 1){
                    gender = '女';
                }
                let doctor_info = {
                    name:info.doctorName,
                    position:info.techTitle,
                    hospital:info.doctorHospital,
                    department:info.doctorDept,
                    sex:gender,
                    project:[],
                    doctorId:info.doctorId,
                    techTitle:info.techTitle,
                    executeTitle:info.executeTitle,
                    hcoProvince:info.province,
                    hcoCity:info.city,
                    concat:info.doctorContact.split(',')
                };
                return doctor_info;
            },
            //列表数据
            get_project_list(){
                let that = this;
                let data = {
                    currentPage:this.page.currentPage,
                    totalPage:this.page.totalPage,
                    pageSize:this.page.pageSize,
                    productId:this.project_name,
                    repId:this.rep_name,
                    isRecruit:this.project_status
                };
                baseAjax(api.project_doctor_list, data, (res)=>{
                    if(res.code === statusCode.success){
                        let {pageSize,totalPage,value,count} = res.data;
                        that.page.pageSize = pageSize;
                        that.page.totalPage = totalPage;
                        that.page.total = count;
                        that.projectDoctorList = value;
                        that.projectDoctorList.forEach(item=>{
                            if(item.isRecruit == 0){
                                item.isRecruit = '未招募';
                                item.bgcolor = 'rgba(145, 147, 152, 0.2)';
                                item.color = 'rgba(145, 147, 152, 1)';
                            }else if(item.isRecruit == 1){
                                item.isRecruit = '成功招募';
                                item.bgcolor = 'rgba(26, 179, 148, 0.2)';
                                item.color = 'rgba(26, 179, 148, 1)';
                            }else if(item.isRecruit == 2){
                                item.isRecruit = '退出项目';
                                item.bgcolor = 'rgba(238, 0, 0, 0.2)';
                                item.color = 'rgba(238, 0, 0, 1)';
                            }
                        });
                    }
                });
            },
            //获取所有产品
            get_all_product(){
                let that = this;
                baseAjax(api.get_all_product, '', (res)=>{
                    if(res.code === statusCode.success){
                        that.project_list = res.data;
                    }
                });
            },
            //获取产品对应代表
            get_rept_list(){
                this.rep_name = '';
                let that = this;
                baseAjax(api.get_product_rept, [this.project_name], (res)=>{
                    if(res.code === statusCode.success){
                        that.rep_list = res.data;
                    }
                });
            },
            //查询
            search_list(){
                this.handleCurrentChange(1);
            },
            //重置
            reset_list(){
                this.project_name = '';
                this.rep_name = '';
                this.project_status = '';
            },
            //导出
            exportProjectDoctor(){
                let data = {
                    productId:this.project_name,
                    repId:this.rep_name,
                    isRecruit:this.project_status
                };
                console.log(url.exportProjectDoctor)
                httpExcel(url.exportProjectDoctor, data, {responseType: 'blob'}).then((res)=>{
                    console.log(res)
                    if(!res)return;
                    const url = window.URL.createObjectURL(new Blob([res.data]));
                    const link = document.createElement('a');
                    link.href = url;
                    let date = this.getNowFormatDate();
                    link.setAttribute('download', date + '.xlsx');
                    document.body.appendChild(link);
                    link.click();
                });
            },
            //时间
            getNowFormatDate() {
                var date = new Date();
                var seperator1 = "-";
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var strDate = date.getDate();
                if (month >= 1 && month <= 9) {
                month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
                }
                var currentdate = year + seperator1 + month + seperator1 + strDate;
                return currentdate;
            }
        }
    }
</script>

<style lang="less" scoped>
.project_doctor{
    font-family: PingFangSC-Regular, PingFang SC;
    .search{
        .left,.center{
            margin-right:24px;
        }
        .center{
            .search_list{
                .search_text{
                    min-width:42px;
                }
            }
        }
    }
    .project_doctor_list{
        /deep/.el-table{
            tbody{
                tr{
                    td:first-child{
                        padding-left:23px;
                    }
                    td:nth-child(3){
                        .cell{
                            color:#2A82E2;
                            cursor: pointer;
                        }
                    }
                    td:last-child{
                        .cell{
                            span{
                                display:inline-block;
                                padding: 4px 11px;
                                font-size: 12px;
                            }
                        }
                    }
                }
            }
        }
    }

    /deep/.el-dialog {
        .el-dialog__body{
            padding-top:17px;
            padding-left: 52px;
            padding-right: 52px;
        }

        .search_list {
            display: flex;
            margin-bottom: 15px;
            margin-right: 10px;
            align-items: center;
        }

        .mandatory_logo{
            display: inline-block;
            transform: translateY(3px);
        }

        .search_text {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            width: 15%;
        }

        .el-input{
            .el-input__inner{
                height:32px;
            }
        }

        .project_input{
            width: 72%;
        }

        .el-input__suffix{
            .el-input__suffix-inner{
                .el-input__icon{
                    line-height:32px;
                }
            }
        }

        .el-input__prefix{
            .el-input__icon{
                line-height:32px;
            }
        }
    }

    i {
      font-size: 20px;
    }
}
</style>
